/* 
发布管理-待发布页面，要显示当前用户+发布状态（publishState===1）为 待发布 所有新闻信息
发布管理-已发布页面，要显示当前用户+发布状态（publishState===2）为 已上线 所有新闻信息
发布管理-已下线页面，要显示当前用户+发布状态（publishState===3）为 已下线 所有新闻信息 
*/
import React, { useEffect, useState } from 'react'
import { Table, Button, notification, message, Modal } from 'antd';
import { NavLink } from 'umi';
import axios from 'axios';
import usePublish from '@/util/usePublish';
import _ from 'lodash';
import type { NotificationPlacement } from 'antd/es/notification/interface';

type stringKey = Record<string, string>;
const getTableDataSourceRequest = (username: string, publishState: number) => {
    return axios.get(`http://localhost:3000/news?_expand=category&author=${username}&publishState=${publishState}`);
};
const updateNewsRequest = (item: any, id: string | number | undefined) => {
    return axios.patch(`http://localhost:3000/news/${id}`, {
        ...item
    })
}
export default function NewsPublishTable(props: any) {
    const currentUser = JSON.parse(localStorage.getItem('token') as string);
    const buttonTextObj: stringKey = {
        '1': '发布',
        '2': '下线',
        '3': '删除'
    };
    const { dataSource } = props;
    const [loading, setLoading] = useState(false);
    const [tableDataSource, setTableDataSource] = useState(dataSource);
    // 保存选中的item数据
    const [currentItem, setCurrentItem] = useState(null);
    useEffect(() => {
        setTableDataSource(dataSource)
    }, [dataSource]);
    // 删除按钮对话框是否显示，初始为false，不显示
    const [deleteOpen, setDeleteOpen] = useState(false);
    //删除对话框的异步操作等待的loading
    const [DelConfirmLoading, setDelConfirmLoading] = useState(false);
    //#region 消息通知框
    const openNotification = (placement: NotificationPlacement, newsTips: string) => {
        notification.open({
            message: `通知`,
            description: newsTips,
            placement,
            onClick: () => {
                console.log('Notification Clicked!');
            },
        });
    };
    // 删除对话框的取消，执行回调函数
    const handleDeleteCancel = () => {
        console.log('取消操作');
        // 取消操作，关闭删除对话框
        setDeleteOpen(false);
    };
    // 删除对话框的确认，执行回调函数
    const handleDeleteConfirm =  (item: any) => {
        // 发起网络请求，删除新闻信息
        axios.delete(`http://localhost:3000/news/${item.id}`).then(res => {
            // 查询已下线的新闻数据
            message.success('成功删除新闻信息');
            setDelConfirmLoading(false);
            setDeleteOpen(false);
            return getTableDataSourceRequest(currentUser[0].username, 3);
        }).then(res => {
            setTableDataSource(res.data);
            setLoading(false);
            
        }).catch(error => {
            setLoading(false);
            console.log(error)
        });

    };
    //表格中删除按钮，删除对应的新闻信息
    const handelDeleteNews = (item: any) => {
        // 显示表格loading
        setLoading(true);
        // 显示删除对话框异步操作loading
        setDelConfirmLoading(true);
        // 删除新闻对应信息
        handleDeleteConfirm(item);
    };
    const handelClick = (item: any) => {
        setLoading(true);
        const newItem = _.cloneDeep(item);
        switch (item.publishState) {
            // 未发布 功能页面
            case 1:
                newItem.publishState = 2; //将状态设置为已发布状态
                // 发起网络请求，通过更新新闻信息
                updateNewsRequest(newItem, newItem.id).then(res => {
                    // 查询未发布的新闻数据
                    // const {dataSource:tempDataSource}=usePublish(1);
                    openNotification('bottomRight', '你可以到【发布管理/已发布】页面中查看您的新闻');
                    return getTableDataSourceRequest(currentUser[0].username, 1)
                }).then(res => {
                    setTableDataSource(res.data);
                    setLoading(false);
                }).catch(error => {
                    setLoading(false);
                    console.log(error)
                });
                break;

            // 已发布 功能页面
            case 2:
                newItem.publishState = 3; //将状态设置为已下线状态
                // 发起网络请求，通过更新新闻信息
                updateNewsRequest(newItem, newItem.id).then(res => {
                    openNotification('bottomRight', '你可以到【发布管理/已下线】页面中查看您的新闻');
                    // 查询已发布的新闻数据
                    return getTableDataSourceRequest(currentUser[0].username, 2);
                }).then(res => {
                    setTableDataSource(res.data);
                    setLoading(false);
                }).catch(error => {
                    setLoading(false);
                    console.log(error)
                });
                break;
            // 已下线 功能页面
            case 3:
                setDeleteOpen(true);
                setCurrentItem(newItem);
                break;
            default:
                setLoading(false);
                break;
        }
    }
    const columns = [
        {
            title: '新闻标题',
            dataIndex: 'title',
            key: 'title',
            render: (title: string, item: any) => {
                return <NavLink to={`/news-manage/preview/${item.id}`}>{title}</NavLink>
            }
        },
        {
            title: '作者',
            dataIndex: 'author',
            key: 'author',
        },
        {
            title: '新闻分类',
            dataIndex: 'category',
            key: 'category',
            render: (category: any) => category.title
        },

        {
            title: '操作',
            render: (item: any) => {
                return (<div>
                    <Button type='primary' style={{ 'marginRight': '10px' }} onClick={() => {
                        handelClick(item)
                    }}>{buttonTextObj[item.publishState]}</Button>

                </div>)
            }
        }
    ]
    return (
        <div>
            <Table dataSource={tableDataSource} columns={columns} loading={loading}
                rowKey={(item) => item.id} sticky scroll={{ y: '63vh' }} />

            <Modal
                title={`【${(currentItem as any)?.title}】删除`}
                open={deleteOpen}
                onOk={() => { handelDeleteNews(currentItem) }}
                confirmLoading={DelConfirmLoading}
                // mask={false}
                onCancel={handleDeleteCancel}
                okText='确定'
                cancelText='取消'
            >
                <p>是否要删除该新闻</p>
            </Modal>
        </div>
    )
}
